<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <style>
        #container {
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
            width: 800px;
            height: 600px;
        }

        #container div {
            width: 19px;
            height: 19px;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            float: left;
        }

        .head {
            background-color: red
        }

        .body {
            background-color: green;
        }

        .ball {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="container">
</div>
<script type="text/javascript">
    var row = 30;//行
    var col = 40;//列
    var direction = "right";
    var container = $("#container");
    var snake = new Array();
    for (var i = 0; i < row; i++) {
        for (var j = 0; j < col; j++) {
            container.append("<div id='" + i + "-" + j + "'></div>")
        }
    }
    snake[0] = "0-1";//头
    snake[1] = "0-0";//身子
    drawSnake();
    setInterval("move()", 500);
    createBall();
    $(document).keydown(function (e) {
        //左37 上38  右39 下40
        switch (e.keyCode) {
            case 37:
                if (direction == "right") return;
                direction = "left";
                break;
            case 38:
                if (direction == "down") return;
                direction = "up";
                break;
            case 39:
                if (direction == "left") return;
                direction = "right";
                break;
            case 40:
                if (direction == "up") return;
                direction = "down";
                break;
        }
        move();//加速
    })

    function drawSnake() {
        //擦掉原来的蛇
        $(".head").removeClass("head")
        $(".body").removeClass("body")
        $("#" + snake[0]).addClass("head");
        for (var i = 1; i < snake.length; i++) {
            $("#" + snake[i]).addClass("body");
        }
    }

    function move() {
        var head = snake[0].split("-");//head[0]第几行  head[1]第几列
        //向右走 列++；向左走 列--  ；向下走 行++ ；向上走 行--；
        switch (direction) {
            case 'right':
                head[1]++;
                break;
            case 'up':
                head[0]--;
                break;
            case 'down':
                head[0]++;
                break;
            case 'left':
                head[1]--;
                break;
        }
        //撞墙
        if (head[0] < 0 || head[0] > row || head[1] < 0 || head[1] > col) {
            alert("Game Over");
            return;
        }
        var newSnake = new Array();
        newSnake[0] = head[0] + "-" + head[1];
        if($("#"+newSnake[0]).hasClass("body")){
            alert("Game Over");
            return;
        }
        if ($("#" + newSnake[0]).hasClass("ball")) {
            for (var i = 0; i < snake.length; i++) {
                newSnake.push(snake[i]);
            }
            createBall();
        } else {
            for (var i = 0; i < snake.length - 1; i++) {
                newSnake.push(snake[i]);
            }
        }
        snake = newSnake;
        drawSnake();
    }

    function createBall() {
        $(".ball").removeClass("ball")
        //x-y
        var x = randomNumBoth(0, row);
        var y = randomNumBoth(0, col);
        var ball=$("#" + x + "-" + y);
        if(ball.hasClass("head")||ball.hasClass("body")){
            createBall();
            return;
        }
        ball.addClass("ball")
    }


    function randomNumBoth(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        var num = Min + Math.round(Rand * Range); //四舍五入
        return num;
    }

</script>
</body>
</html>